<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
	String path = request.getContextPath();
	// 获得本项目的地址(例如: http://localhost:8080/MyApp/)赋值给basePath变量 
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	// 将 "项目路径basePath" 放入pageContext中，待以后用EL表达式读出。 
	pageContext.setAttribute("basePath", basePath);
	//out.write(basePath);
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="<%=basePath%>figure/jquery-1.8.3.min.js"></script>
<script src="<%=basePath%>figure/exporting.js"></script>

<script src="<%=basePath%>figure/highcharts.js"></script>

<script src="<%=basePath%>figure/highcharts-more.js"></script>

<script src="<%=basePath%>figure/data.js"></script>

<script type="text/javascript">
$(function () {
	$.ajax({
		url: "<%=basePath%>manager/getFigure.action",
			type : "post",
			async : true,
			cache : false,
			data : {
				"opt" : "101",
				"opt2" : "120"
			},
			dataType : "json",
			success : function(jsondata) {
				console.info("获取的ajax返回的结果内容：" + jsondata);
				$('#container').highcharts(
						{
							title : {
								text : '郴电国际电费变化曲线',
								x : -20
							//center
							},
							subtitle : {
								text : '提供变化的趋势',
								x : -20
							},
							xAxis : {
								categories :jsondata
							},
							yAxis : {
								title : {
									text : '电费 (元)'
								},
								plotLines : [ {
									value : 0,
									width : 1,
									color : '#808080'
								} ]
							},
							tooltip : {
								valueSuffix : '元'
							},
							legend : {
								layout : 'vertical',
								align : 'right',
								verticalAlign : 'middle',
								borderWidth : 0
							},
							series : [ {
								name : 'Tokyo',
								data : jsondata
							} ]
						});
			},
			error : function() {
				alert("出现问题");
			}
		});
	});
</script>

</head>

<body>
	<div id="container" style="min-width: 400px; height: 600px"></div>
	<div style="height:30px"></div>
	<c:if test="${sessionScope.role==1 }">
	<form action="<%=basePath%>manager/changeEle.action">
	<div align="center"><input type="text" class="form-control" id="change" name="change" placeholder="新的电费~" style="height:30px;wight:80px">
	<button type="submit" class="btn btn-danger btn-lg" style="height:40px;wight:100px">&nbsp;&nbsp;改&nbsp;变&nbsp;电&nbsp;费&nbsp;&nbsp;</button></div></form></c:if>
</body>

</html>